<template>
  <div class="console-message-wrapper">
    <a-row class="head">
      <a-icon type="left" @click="$router.push('/thirdService')" />
      <a-col class="title">
        <strong>短信发送</strong>
      </a-col>
    </a-row>
    <div class="message-search-wrapper">
      <div>
        <a-input-search style="width: 200px; margin-right: 12px" placeholder="搜索模板" @search="handleSearch" />
        <a-select placeholder="短信类型" style="width: 200px;margin-right: 12px" v-model="searchForm.type" allow-clear>
          <a-select-option :key="1" :value="1">验证码</a-select-option>
          <a-select-option :key="2" :value="2">通知</a-select-option>
          <a-select-option :key="3" :value="3">推广</a-select-option>
        </a-select>
        <a-select placeholder="关联场景" style="width: 200px;" v-model="searchForm.scene" allow-clear>
          <a-select-option :key="item.id" :value="item.id" v-for="item in options">
            {{ item.description }}
          </a-select-option>
        </a-select>
      </div>
      <div>
        <a-button type="primary" @click="goAdd">添加短信模板</a-button>
      </div>
    </div>
    <div>
      <a-table :columns="columns" :data-source="messageData" :pagination="false" :row-key="d => d.id">
        <span slot="type" slot-scope="text">
          {{ messageType[text - 1] }}
        </span>
        <span slot="action" slot-scope="text, record">
          <a-button type="link" @click="goEdit(record.id)">编辑</a-button>
          <a-divider type="vertical"></a-divider>
          <a-button type="link" @click="goConfig(record.id)">配置</a-button>
        </span>
      </a-table>
    </div>
  </div>
</template>

<script>
import { getScene, getMessage } from "./api";
const columns = [
  {
    title: "模板名称",
    dataIndex: "name",
    key: "name",
    scopedSlots: { customRender: "name" }
  },
  {
    title: "模板类型",
    dataIndex: "type",
    key: "type",
    scopedSlots: { customRender: "type" }
  },
  {
    title: "模板内容",
    dataIndex: "content",
    key: "content",
    scopedSlots: { customRender: "content" }
  },
  {
    title: "关联场景",
    dataIndex: "scene	",
    key: "scene	",
    scopedSlots: { customRender: "scene	" }
  },
  {
    title: "操作",
    key: "action",
    scopedSlots: { customRender: "action" }
  }
];
const messageType = ["验证码", "通知", "推广"];
export default {
  data() {
    return {
      columns,
      messageData: [],
      messageType,
      searchForm: {},
      options: []
    };
  },

  created() {
    this.init();
  },

  watch: {
    searchForm: {
      handler() {
        this.init();
      },
      deep: true
    }
  },
  methods: {
    init() {
      const data = {
        isDefault: false,
        ...this.searchForm
      };
      getMessage(data)
        .then(res => {
          this.messageData = res.data;
        })
        .catch(err => {
          console.log("debug log --> ", err);
        });
      getScene()
        .then(res => {
          this.options = res.data;
        })
        .catch(err => {
          console.log("debug log --> ", err);
        });
    },
    goAdd() {
      this.$router.push({
        path: "/thirdService/smsTemplate/add",
        query: {
          isEdit: 0
        }
      });
    },
    handleSearch(val) {
      this.searchForm.name = val;
      this.init();
    },
    goConfig(id) {
      this.$router.push({
        path: "/thirdService/smsTemplate/config",
        query: {
          templateId: id
        }
      });
    },
    goEdit(id) {
      this.$router.push({
        path: "/thirdService/smsTemplate/add",
        query: {
          isEdit: 1,
          id
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
.console-message-wrapper {
  padding: 0 12px;
  .head {
    .anticon-left {
      z-index: 3;
      left: 24px;
      position: absolute;
      color: #d8d8d8;
      font-size: 24px;
      margin-top: 18px;
    }

    font-size: 16px;
    color: #000;
    font-weight: 500;
    text-align: center;
    line-height: 60px;
    height: 60px;
    border-bottom: 1px solid #e8e8e8;
  }
  .message-search-wrapper {
    display: flex;
    justify-content: space-between;
    margin: 12px 0;
  }
}
</style>
